<template>
  <dl v-for="(item, index) of messageList" :key="index" @click="gotoTalk(item.id)">
    <dd>
      <img src="@/assets/img/icon/icon-message.png" alt="">
      <span></span>
    </dd>
    <dt>
      <h3>北京驻场无忧科技有限公司<span>5分钟前</span></h3>
      <p>您好，我们这边在招聘前端工程师职位，看了您的简历</p>
    </dt>
  </dl>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";

const router = useRouter()
const {messageList} = defineProps({
  messageList: {
    type: Array,
    default: () => []
  }
})
const gotoTalk = (id: any) => {
  router.push('/message/talk/' + id)
}
</script>
<style scoped>
dl {
  display: flex;
  align-items: center;
  padding: 0.9rem 0;
  margin: 0 0.67rem;
  border-bottom: 1px solid #eeeeee;
  font-size: 0.64rem;
  color: #666666;
}

dl dd {
  position: relative;
  margin-right: 0.56rem;
}

dl dd img {
  width: 2.61rem;
  height: 2.61rem;
}

dl dd span {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.32rem;
  height: 0.32rem;
  background: #ff0000;
  border-radius: 50%;
}

dl dt {

}

dl dt h3 {
  margin-bottom: 0.43rem;
  font-size: 0.8rem;
  line-height: 0.8rem;
  font-weight: 500;
  color: #333;
}

dl dt h3 span {
  float: right;
  font-size: 0.64rem;
  font-weight: 100;
  color: #999;
}

dl dt p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.69rem;
  line-height: 0.69rem;
}
</style>